import React from 'react'
import { View, Text, Image } from '@tarojs/components'
// import LeftIcon from './leftIcon.svg'
import { IOptions, IQuestions, options } from '@/pages/Home/TestQuestions/index'
import './index.scss'
import checked from '@/assets/svg/checked.svg'
import NoChecked from '@/assets/svg/no-checked.svg'

interface ICTestRadio {
  data: IQuestions
  selectedData: options
  submitChange: (v: options) => void
  index: number
}

/**
 * 测试题 单选 多选专用
 */
export default function CTestRadio(params: ICTestRadio) {
  const { data, selectedData, submitChange, index } = params
  return (
    <View>
      <Text className='question_title'>{index + '、' + data.question + `${data.questionType === 2 ? '（多选题）' : ''}`}</Text>
      <View className='question_box'>
        {data.options &&
          data.options.map((item) => {
            return (
              <RadioItem
                data={item}
                selectedData={JSON.parse(JSON.stringify(selectedData))}
                onClick={() => {
                  if (data.questionType === 2) {
                    const arr = [...selectedData.optionIds]
                    let index = -1
                    for (let i = 0; i < arr.length; i++) {
                      if (arr[i] === item.id) {
                        index = i
                        break
                      }
                    }
                    if (index === -1) {
                      arr.push(item.id)
                    } else {
                      arr.splice(index, 1)
                    }
                    const newdata = JSON.parse(JSON.stringify(selectedData))
                    newdata.optionIds = arr
                    submitChange(newdata)
                  } else {
                    const arr = [...selectedData.optionIds]
                    if (arr.length === 0) {
                      arr.push(item.id)
                    } else {
                      arr.splice(0, 1, item.id)
                    }
                    const newdata = JSON.parse(JSON.stringify(selectedData))
                    newdata.optionIds = arr
                    submitChange(newdata)
                  }
                }}
              />
            )
          })}
      </View>
    </View>
  )
}

interface IRadioItem {
  data: IOptions
  selectedData: options
  onClick: () => void
}
function RadioItem(params: IRadioItem) {
  const { data, selectedData, onClick } = params

  function isChecked() {
    // console.log('selectedData.optionIds---------',selectedData.optionIds);
    if (!selectedData || !selectedData.optionIds || selectedData.optionIds.length === 0) {
      return false
    }
    const arr = selectedData.optionIds.filter((item) => item === data.id)
    if (arr.length === 0) {
      return false
    }
    return true
  }
  return (
    <View onClick={onClick} className='RadioItem'>
      {isChecked() && <Image src={checked} className='RadioItem_check_img' />}
      {!isChecked() && <Image src={NoChecked} className='RadioItem_check_img' />}
      <Text className='radio_content'>{data.optionContext}</Text>
      {data.optionImg && <Image className='radio_image' src={data.optionImg} />}
    </View>
  )
}
